<template>
	<view class="">
		<nav-bar isItem>
			<image slot="left" @click="back" src="@/static/img/common/left-arrow.svg" alt=""
				style="width: 64rpx;height: 64rpx;" />
			<view slot="center">编辑地址</view>
		</nav-bar>
		<view class="edit_address">
			<view class='view' >
				<view class="desc">收货人</view>
				<input class="input" v-model="receiver" :class="(receiver)" type="text" placeholder="姓名" minlength="1" maxlength="10"
					autocomplete="false" />
			</view>
			<view class='view' >
				<view class="desc">联系方式</view>
				<input  class="input" v-model="phone" :class="(phone)" type="text" placeholder="手机号码" minlength="11" maxlength="11"
					max="11" min="11" autocomplete="false" />
			</view>

			<view class='view' >
				<view class="desc">详细地址</view>
				<input class="input" v-model="currentAddress" :class="(currentAddress)" type="text" placeholder="详细地址需填写街道楼栋楼层或房间号信息"
					minlength="1" maxlength="32" autocomplete="false" />
			</view>

			<view class='view' >
				<view class="desc">收货地址</view>
				<address-picker v-if="tag" :province="province" :city="city" :area="area" :cityIndex="cityIndex"
					:provinceIndex="provinceIndex" :areaIndex="areaIndex" @updateAddress="updateAddress">
				</address-picker>
			</view>

			<view  class='view' id="btns">
				<view class="Btn delBtn" :class="btnIsActive" @click="deleteAddress">
					<span>删除该地址</span>
				</view>
				<view class="Btn" :class="btnIsActive" @click="submit">
					<span>确认</span>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		deleteAddress
	} from "network/user";
	import AddressPicker from "components/common/AddressPicker/addressPicker"
	import {
		mapState,
		mapMutations
	} from "vuex";

	import {
		selectAddress,
		updateAddress
	} from "network/user";
	import NavBar from "components/common/NavBar/NavBar"
	export default {
		components: {
			NavBar,
			AddressPicker
		},
		data() {
			return {
				currentAddress: "",
				receiver: "",
				phone: "",
				i: undefined,
				idx: 0,
				phoneReg: /^1[3-9]\d{9}$/,
				province: undefined,
				city: undefined,
				area: undefined,
				cityIndex: undefined,
				areaIndex: undefined,
				provinceIndex: undefined,
				tag: false,
			};
		},
		onLoad({
			edit
		}) {
			this.i = edit;
			console.log('edit', edit);
			selectAddress(this.i).then((data) => {
				console.log(data, 'selectAddress', this.i);
				this.$nextTick(() => {
					if (data[1].data.tag) {
						this.province = data[1].data.data[0].province;
						this.city = data[1].data.data[0].city;
						this.area = data[1].data.data[0].area;
						this.cityIndex = data[1].data.data[0].cityIdx;
						this.areaIndex = data[1].data.data[0].areaIdx;
						this.provinceIndex = data[1].data.data[0].provinceIdx;
						this.tag = true;
						console.log()
						this.currentAddress = data[1].data.data[0].address;
						this.receiver = data[1].data.data[0].receiver;
						this.phone = data[1].data.data[0].phone;
					} else {
						this.back();
					}
				});
			});
		},
		computed: {
			...mapState(["address", "addressReload"]),
			btnIsActive() {
				return !this.receiver.$invalid &&
					!this.phone.$invalid &&
					!this.currentAddress.$invalid ?
					"btn_active" :
					"btn";
			},
			isPhoneValid() {
				return this.phoneReg.exec(this.phone)
			},
			receiver_class() {
				return this.receiver.length ? 'dirty' : '';
			},
			phone_class() {
				if (this.phone.length)
					return this.isPhoneValid ? 'dirty' : 'error';
				return '';
			},
			address_class() {
				return this.address.length ? 'dirty' : '';
			},
		},
		methods: {
			...mapMutations(["setAddress", "setAddressReload","delAddress"]),
			updateAddress(data) {
				console.log('updateAddress', data);
				this.province = data.province;
				this.city = data.city;
				this.area = data.area;
				this.cityIdx = data.cityIdx;
				this.areaIdx = data.areaIdx;
				this.provinceIdx = data.provinceIdx;
			},
			submit() {
				let data = {
					address: this.address,
					phone: this.phone,
					receiver: this.receiver,
					province: this.province,
					city: this.city,
					area: this.area,
					cityIdx: this.cityIdx,
					areaIdx: this.areaIdx,
					provinceIdx: this.provinceIdx,
					i: this.i,
					address: this.currentAddress
				};
				console.log('submit', data);
				updateAddress({
					data
				}).then(async (res) => {
					if (res[1].data.tag) {
						await this.success('修改成功');
						this.back();
						this.setAddressReload(true);

					}
				});
			},
			deleteAddress() {
				uni.showModal({
					title: "提示",
					content: `确认删除该地址?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							if (this.i == this.address.i) {
								this.delAddress();
							}
							deleteAddress({
								i: this.i
							}).then(async (res) => {
								if (res[1].data.tag) {
									await this.success('删除成功');
									this.back();
									this.setAddressReload(true);
								} else {
									this.error('删除失败');
								}
							});
						} else {
							this.info('已取消');
						}
					},
				})
			},
		},


	};
</script>
<style lang="scss" scoped>
	.btn_active {
		background-color: rgb(252, 26, 0);
	}

	.btn {
		background-color: rgb(255, 188, 179);
		pointer-events: none;
	}

	#btns {
		display: flex;
		flex-direction: row;
		bottom: 0;
		position: absolute;
	}

	.Btn {
		width: 45vw;
		height: 80rpx;
		border-radius: 70rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		color: whitesmoke;
	}

	.delBtn {
		background-color: rgb(64, 158, 255);
	}

	.edit_address {
		display: flex;
		flex-direction: column;
		background-color: white;
		width: 100vw;
		height: 100vh;
	}

	.desc {
		color: rgb(121, 121, 121);
		width: 100%;
		height: 50rpx;
		padding: 20rpx 0;
	}

	.edit_address>.view {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		width: 95vw;
		padding: 1vh 2.5vw;
		border-bottom: 2rpx solid rgb(216, 216, 216);
		font-size: 32rpx;
	}

	.input {
		outline: none;
		width: 100%;
		height: 60rpx;
	}

	.input::placeholder {
		color: rgb(216, 216, 216);
	}

	.area {
		width: 100%;
	}

	.dirty {
		border-color: #5a5;
		background: #efe;
	}

	.dirty:focus {
		outline-color: #8e8;
	}

	.error {
		border-color: red;
		background: #fdd;
	}

	.error:focus {
		outline-color: #f99;
	}
</style>
